<template>
  <!-- 代理升级 -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="代理升级" width="55%" :before-close="handleClose" top="50px" :close-on-click-modal="false">
    <div class="border-box">
      <page-details ref="baseForm" :data="data"/>
      <el-form ref="activityForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="0">
        <div class="flex item-box" v-for="(item,index) in activityData" :key="index">
          <div class="title width25">
            {{ item.label }}
          </div>
          <div class="content width80">
            <!-- 天数 -->
            <div v-show="item.key=='day'" style="height:auto;">
              <div class="flex" v-for="(second,two) in dayData" :key="two">
                <div class="btn-box-add">
                  <el-tooltip content="新增配置" v-show="dayIndex==two">
                    <el-button class="marginL10" size="mini" type="primary" circle icon="el-icon-plus" @click="addDay" />
                  </el-tooltip>
                </div>
                <el-form-item label="开始天数:" label-width="80px">
                  <el-input-number :min="1" :max="999999999" :precision="0" v-model="second.start" controls-position="right" clearable placeholder="请输入开始天数"/>
                </el-form-item>
                <el-form-item label="结束天数:" label-width="80px">
                  <el-input-number :min="1" :max="999999999" :precision="0" v-model="second.end" controls-position="right" clearable placeholder="请输入结束天数"/>
                </el-form-item>
                <div class="btn-box-delete" label-width="60px">
                  <el-tooltip content="删除配置" v-show="dayData.length != 1">
                    <el-button class="marginL10" size="mini" type="danger" circle icon="el-icon-minus" @click="deleteDay(two)" />
                  </el-tooltip>
                </div>
              </div>
            </div>
            <!-- 代理级别 -->
            <div class="padding10" v-show="item.key=='agency'" style="height:auto;">
              <div class="flex marginB5" v-for="(second,two) in agencyData" :key="two">
                <el-form-item label="代理等级:" label-width="80px">
                  <el-select class="width120" v-model="second.level" placeholder="请选择代理等级" :disabled="true" filterable>
                    <el-option :label="third.label" :value="third.value" v-for="(third, three) in agencyDataList" :key="three"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="选择道具:" label-width="90px">
                  <el-select class="width150" v-model="second.item_id" placeholder="请选择道具类型" filterable>
                    <el-option :label="third.label" :value="third.value" v-for="(third, three) in propDataArray" :key="three"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="数量:" label-width="60px">
                  <el-input-number class="width150" :min="1" :max="999999999" :precision="0" v-model="second.award" controls-position="right" clearable placeholder="请输入道具数量"/>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('activityForm')">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addActivity,
  editActivity
} from "@/api/activity";

import PageDetails from '../page-details.vue'
export default {
  components: {
    PageDetails
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    propDataArray: {
      type: Array,
      default: function () {
        return this.$store.state.commonState.propDataArray
      }
    },
  },
  data () {
    return {
      isShow: false,
      activityData: [
        { label: '用户可见天数', key: 'day' },
        { label: '代理级别', key: 'agency' }
      ],
      agencyDataList:[
        {label:'青铜',value:1},
        {label:'白银',value:2},
        {label:'黄金',value:3},
        {label:'白金',value:4},
        {label:'钻石',value:5},
      ],
      agencyData: [
        {level:1,item_id: 1,award: 1,exp: 1},
        {level:2,item_id: 1,award: 1,exp: 1},
        {level:3,item_id: 1,award: 1,exp: 1},
        {level:4,item_id: 1,award: 1,exp: 1},
        {level:5,item_id: 1,award: 1,exp: 1},
      ],
      agencyIndex: 0,
      dayData: [
        {start:1,end: 1}
      ],
      dayIndex: 0,
      formParams: {},
      ruleForm: {},
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
        let params = that.formParams;
        if(params.parameter.awards){
          that.agencyData = params.parameter.awards
          that.agencyIndex = params.parameter.awards.length - 1
        }
        if(params.parameter.awards){
          that.dayData = params.parameter.register_show_day
          that.dayIndex = params.parameter.register_show_day.length - 1
        }
      } else {
        that.formParams = {}
      }
    },
  },
  mounted(){},
  methods: {
    // 确认
    handleConfirm (formvalue) {
      if(!this.$refs.baseForm.handleConfirm()){
        return false
      }
      let that = this,params = JSON.parse(JSON.stringify(this.$refs.baseForm.handleConfirm())),
      awards=that.$public.activeNumberByWan(that.agencyData);
      params.other = {}
      params.activity_type = 19
      params.other.awards = awards
      params.other.register_show_day = that.dayData
      params.other = JSON.stringify(params.other)
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          if (params.id) {
            editActivity(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            addActivity(params).then((res) => {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 新增天数
    addDay () {
      this.dayIndex++
      this.dayData.push({
        start: 1,
        end: 1
      })
    },
    deleteDay (index) {
      this.dayIndex--
      this.dayData.splice(index, 1,)
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.el-form-item {
  margin-bottom: 0;
}
.border-item {
  padding: 10px;
}
.box-title {
  font-size: 17px;
  font-weight: 600;
}
.btn-box-add {
  width: 50px;
  text-align: center;
  .el-button {
    height: 28px;
  }
}
.btn-box-delete {
  width: 50px;
  text-align: center;
  .el-button {
    height: 28px;
  }
}
.prooItem {
  margin: 5px;
  font-size: 16px;
  font-weight: 600;
  p {
    height: 24px;
  }
}
</style>
